<template>
  <div class="v-select-table-owner">
    <div class="name-editor-area">
      <span class="label">{{ $t("设置图表名称") }}:</span>
      <el-input
        v-model="name"
        :placeholder="$t('请输入图表名称')"
        @input="val => stepValueChange(val, 'name')"
      />
    </div>
    <TreeSelect
      v-bind="props"
      @stepValueChange="val => stepValueChange(val[0], 'ownerId')"
    ></TreeSelect>
  </div>
</template>
<script lang="ts" setup>
import { ref, onBeforeMount } from "vue";
import TreeSelect from "@/modules/model/modals/modelTreeSelect/components/TreeSelect.vue";
import { modelService } from "@/mdesign-lib/mdesign-app.umd.js";

interface Props {
  loadMethod: string;
  loadParams: any;
  defaultCurTab?: "tree" | "list";
  multiple?: boolean;
  defaultSelectedId?: string; // 树上高亮选中的id
  defaultRightSelectedIds?: string[]; // 右侧多选项id
  defaultCheckedIds?: string[]; // 初始选中项
  checkable?: boolean;
  nullable?: boolean;
  showNodeLabel?: boolean;
  stereotype: string;
  defaultTableName: string;
}

const props = defineProps<Props>();

const name = ref("");

onBeforeMount(() => {
  getElementNewName();
});

const getElementNewName = async () => {
  const tableName = await modelService.getElementNewName(props.loadParams.projectId, props.stereotype, props.defaultTableName);
  name.value = tableName;
  stepValueChange(tableName, "name");
};

const emit = defineEmits<{
  (e: "stepValueChange", value: any, path: string[]): void;
}>();

const stepValueChange = (val: any, key: string) => {
  const newPath = [key];
  emit("stepValueChange", val, newPath);
};
</script>
<style lang="scss">
.v-select-table-owner {
  height: 100%;
  border: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  .name-editor-area {
    display: flex;
    padding: 8px;
    align-items: center;
    > .label {
      color: rgba(0, 0, 0, 0.65);
      margin-right: 2px;
    }
    .el-input {
      flex: 1;
      .el-input__wrapper {
        box-shadow: none;
        border: 1px solid #e0e0e0;
      }
    }
  }
}
</style>
